<template>
    <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>配置管理</el-breadcrumb-item>
            <el-breadcrumb-item>汇率管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div id="main" style="width: 100%;height:600px;">
                当前汇率：<el-tag type="success">{{excharge}}</el-tag>
                <el-button type="primary" style="margin-left: 300px;" @click="dialogTableVisible = true">修改</el-button>
            </div>
        </el-card>
        <el-dialog title="修改汇率" :visible.sync="dialogTableVisible">
             <el-form :model="form">
                <el-form-item label="新汇率" label-width="100px">
                    <el-input v-model="form.queryString" autocomplete="off" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="短信验证码" label-width="100px">
                <el-input v-model="form.password" autocomplete="off" style="width: 60%;"></el-input>
                <el-button  type="primary" @click="getcode" v-if="verification == 60">发送验证码</el-button>
                <el-button  type="primary" v-if="verification != 60" v-text="verification +'s重新获取'"></el-button>
                </el-form-item>
                <!-- <el-form-item  label-width="100px">
                <el-button type="primary" @click="getcode">发送验证码</el-button>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogsbmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script> 
export default {
  data() {
    return {
       timer:null,
      verification: 60,
      excharge: "2",
      dialogTableVisible: false,
      form: {
        queryString: "",
        password: ""
      }
    };
  },
  created() {
    // this.gradtie()
    this.formatTime(new Date());
  },
  methods: {
    // 60s 倒计时
    countDown() {
      if (this.verification > 0) {
        this.verification--;
        this.timer = setTimeout(() => {
          this.countDown(this.verification);
        }, 1000);
      } else {
        clearInterval(this.timer);
        this.verification = 60;
      }
    },
    dialogsbmit() {
      this.$http.post("/manage/conf/editCyRate", this.form).then(res => {
        //   this.excharge = res.data.data;
        if(res.data.status == 1) {
            this.formatTime(new Date());
            this.dialogTableVisible = false
        }
      });
    },
    getcode() {
      this.$http.post("/manage/conf/sendSmsCode", {}).then(res => {
        //   this.excharge = res.data.data;
        console.log(res);
        if (res.data.status == 1) {
          this.countDown();
          this.$message({
            message: "短信验证码发送成功",
            type: "success"
          });
        }
      });
    },
    formatTime(dateTime, format = "yyyy-MM-dd") {
      if (!dateTime) return dateTime;
      let args = {
        "M+": dateTime.getMonth() + 1,
        "d+": dateTime.getDate(),
        "h+": dateTime.getHours(),
        "m+": dateTime.getMinutes(),
        "s+": dateTime.getSeconds(),
        "q+": Math.floor((dateTime.getMonth() + 3) / 3), //quarter
        S: dateTime.getMilliseconds()
      };
      if (/(y+)/.test(format))
        format = format.replace(
          RegExp.$1,
          (dateTime.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var i in args) {
        let n = args[i];
        if (new RegExp("(" + i + ")").test(format))
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length)
          );
      }
      console.log(format);
      // return format;
      this.gradtie(format);
    },
    gradtie(item) {
      this.$http
        .post("/manage/conf/seeCyRate", {
          queryString: item
        })
        .then(res => {
          this.excharge = res.data.data;
          this.form.queryString = res.data.data;
        });
    }
  }
};
</script>
<style scoped>
</style>
